<template>
   <div class="blog-detail-container">
       <h1>{{blog.title}}</h1>
       <div class="aside">
           <span>日期：{{formatDate(blog.createDate)}}</span>
           <span>浏览:{{blog.scanNumber}}</span>
           <a href="#comment-container">评论：{{blog.commentNumber}}</a>
           <RouterLink :to="{
               name:'CategoryBlog',
               params:{
                   categoryId:blog.category.id
               }
           }">分类：{{blog.category.name}}</RouterLink>
       </div>

       <div class="markdown-body" v-html="blog.htmlContent">
           
       </div>
   </div>
</template>

<script>
import {formatDate} from "@/utils";

export default {
    name:'BlogDetail',
    props:{
        blog:{
            type:Object,
            require:true
        }
    },
    methods:{
        formatDate,
    }
}
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
@import "~@/styles/markdown.css";//主体内容样式表

.blog-detail-container{
   .aside{
       font-size:12px;
       color:@gray;
       span,a{
           margin-right:10px;
       }
   } 
   .markdown-body{
      margin:1em 0; 
   }
}
</style>